<template>
	<view class="register">
		<view class="title">
			赊货签
		</view>

		<uni-forms ref="form" :modelValue="formData" label-width="80px" :rules="rules">
			<view class="textH">
				欢迎注册账号
			</view>
			<!-- <button :disabled="formData.Phone" open-type="getPhoneNumber" v-if="showCode" class="button"
				type="primary" @getphonenumber="getPhoneNumber">{{formData.Phone?formData.Phone:'获取手机号'}}</button> -->
			<view v-if="!showCode">
				<uni-forms-item label="验证码" name="SmsCode">
					<input type="number" v-model="formData.SmsCode" placeholder="请输入验证码" />
				</uni-forms-item>
			</view>
			<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="showCode" round
				@click="getPhoneNumber" type="primary">发送验证码</button>
			<button class="button" v-else round @click="registerOrSend(2)" type="primary">完成绑定</button>

			<view v-show="showCode" class="flex" style="margin-bottom: 40rpx;">
				<view class="" style="display: flex;flex-wrap: wrap;width: 80%;">
					<checkbox-group @change="changeAgree">
						<label>
							<checkbox value="a" :checked="agree" />
							我已阅读并同意
						</label>
					</checkbox-group>
					<text @click="openAgreement" style="color: #b051ff">《用户服务协议》、</text>
					<text @click="openUse" style="color: #b051ff;">《隐私政策》</text>
				</view>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import WXBizDataCrypt from '@/utils/WXBizDataCrypt.js'
	import {
		regPhone
	} from '../../utils/regExp.js'
	export default {
		data() {
			return {
				showCode: true,
				formData: {
					Phone: '',
					SmsCode: '',
				},
				agree: false, // 是否同意条款
				rules: {
					Phone: {
						rules: [{
							required: true,
							errorMessage: '请填写手机号',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (!regPhone.test(value)) return callback('手机号格式错误')
								return true
							}
						}]
					},
					SmsCode: {
						rules: [{
							require: true,
							errorMessage: '请填写验证码',
						}]
					},
				},
				openId: '',
				unionid: '',
				session_key: '',
			}
		},
		onLoad(options) {
			this.openId = options.openId
			this.getPhone()
		},
		methods: {
			// 获取手机号权限
			getPhone() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res);
						this.$http('post', '/Base_Manage/Base_User/GetWxData?JsCode=' + res.code +
							'&type=szq').then(
							result => {
								if (result.Success) {
									let data = JSON.parse(JSON.parse(result.Data).data)
									console.log(data);
									this.openId = data.openid //openid 用户唯一标识  
									this.unionid = data.unionid //unionid 开放平台唯一标识
									this.session_key = data.session_key //session_key  会话密钥  
								}
							})
					}
				})
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg.indexOf('fail') != -1) return
				let pc = new WXBizDataCrypt('wx2ba9027e237ff635', this.session_key);
				let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
				this.formData.Phone = data.phoneNumber
				this.registerOrSend(1)
			},
			openAgreement() {
				uni.navigateTo({
					url: '/pages/User/customerPage?Type=1'
				})
			},
			openUse() {
				uni.navigateTo({
					url: '/pages/User/customerPage?Type=0'
				})
			},
			changeAgree(e) {
				if (e.detail.value.length > 0) this.agree = true
				else this.agree = false
			},
			// 注册或发送验证码
			registerOrSend(type) {
				if (type == 1) {
					// 发送验证码
					this.$refs.form.validateField(['Phone']).then(res => {
						this.send()
					})
				} else if (type == 2) {
					if (!this.agree) return uni.showToast({
						icon: 'none',
						title: '请阅读并同意使用条款后进行注册'
					})
					if (this.formData.SmsCode == "") return this.$api.msg('请输入验证码')
					// 校验验证码
					uni.showLoading({
						mask: true
					})
					this.$http('post', '/Base_Manage/Base_User/SaveWeChatUser', {
						"UserPhone": this.formData.Phone,
						"SmsCode": this.formData.SmsCode,
						"openId": this.openId
					}).then(res => {
						uni.hideLoading()
						if (res.Success) {
							uni.setStorage({
								data: 'Bearer ' + res.Data.Token,
								key: 'token',
								success: () => {
									this.op()
								}
							})
						} else uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					})

				}
			},
			send() {
				uni.showLoading({
					title: '发送中',
					mask: true
				})
				this.$http('post', '/Base_Manage/Base_User/WeChatSend', {
					Phone: this.formData.Phone
				}).then(res => {
					uni.hideLoading()
					if (res.Success) {
						uni.showToast({
							icon: 'none',
							title: '验证码已发送'
						})
						this.showCode = false
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})

				}).catch((err) => {
					console.log(err);
				})
			},
			// 用户信息
			op() {
				this.$http('post', '/Base_Manage/Home/GetOperatorInfo').then(res => {
					if (res.Success) {
						uni.setStorageSync('userInfo', res.Data.UserInfo)
						uni.switchTab({
							url: '/pages/Home/Home'
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		text-align: center;
		font-size: 70rpx;
		font-weight: bolder;
		color: #fff;
		margin-top: 140rpx;
		margin-bottom: 15%;
	}

	.textH {
		text-align: center;
		font-size: 40rpx;
		font-weight: 600;
		color: #666666;
		margin-bottom: 60rpx;
	}

	::v-deep.uni-forms {
		background-color: #fff;
		display: flexbox;
		border-radius: 17px;
		padding: 20px 0;
	}

	::v-deep.uni-forms-item {
		color: #000;
		padding: 10rpx 20rpx 10rpx 33rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

	}

	::v-deep.uni-forms-item__error {
		color: #f56c6c;
		font-size: 12px;
		line-height: 3;
	}

	.register {
		width: 100%;
		height: 100%;
		background: $LoginBG no-repeat center center fixed;
		background-size: cover;
		box-sizing: border-box;
		padding: 30rpx;

		p {
			border-bottom: 1px solid #d5d5d5;
			width: 92%;
			margin: 0 auto;
			margin-bottom: 5%;
			margin-top: -2%;
		}

		.button {
			width: 90%;
			border-radius: 100rpx;
			font-size: 20px;
			font-weight: bold;
			margin-top: 75rpx;
			margin-bottom: 20rpx;
			background: linear-gradient(to left, #b5ceff, #3b6dff);
		}


		.flex {
			display: flex;
			margin-top: 40rpx;
			text-align: center;
			color: #a6a6a6;
			font-size: 15px;
			justify-content: center;
			// margin-left: 20%;
		}
	}
</style>